<template>
  <div  class="father">
    <el-container>
      <el-aside :width="width_size">
        <div class="image" >
          <img src="../../assets/img/wifi.jpg" alt="" id="ico_img">
          <div  class="ico_font"  v-if="!flag">Wifi&nbsp;&nbsp;&nbsp;&nbsp;System</div>
        </div>
        <el-menu
          background-color="rgb(25, 26, 35)"
          text-color="#fff"
          unique-opened
          active-text-color="#0952cb"
          :collapse-transition="false"
          :collapse="flag">
          <el-submenu index="1">
            <template slot="title">
              <i  class="iconfont icon-yingyongguanliyuanguanli"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item index="1-1" @click="manager">
              <template slot="title">
                <i  class="iconfont icon-yingyongguanliyuanguanli"></i>
                <span >管理员管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="1-2">
              <template slot="title">
                <i  class="iconfont icon-bumenguanli"></i>
                <span>部门管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="1-3" @click="role">
              <template slot="title">
                <i  class="iconfont icon-jiaoseguanli"></i>
                <span>角色管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="1-4">
              <template slot="title">
                <i  class="iconfont icon-caidanguanli"></i>
                <span>菜单管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="1-5">
              <template slot="title">
                <i  class="iconfont icon-SQLjiankong"></i>
                <span>SQL管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="1-6">
              <template slot="title">
                <i  class="iconfont icon-canshuguanli"></i>
                <span>参数管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="1-7">
              <template slot="title">
                <i  class="iconfont icon-wenjianxiazaicopy"></i>
                <span>文件上传</span>
              </template>
            </el-menu-item>
            <el-menu-item index="1-8">
              <template slot="title">
                <i  class="iconfont icon-zidianguanli"></i>
                <span>字典管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="1-9">
              <template slot="title">
                <i  class="iconfont icon-xitongrizhi"></i>
                <span>系统日志</span>
              </template>
            </el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="iconfont icon-dianziweilan"></i>
              <span slot="title">电子围栏</span>
            </template>
            <el-menu-item index="2-1">
              <template slot="title">
                <i  class="iconfont icon-liuliangtanzhen"></i>
                <span>探针信息</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <div  class="header_top" @click="sizeChange" :width="width_size">|||</div>
          <el-button  type="info" class="header_button" @click="signOutSystem">退出系统</el-button>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      width_size: '200px',
      flag: false
    }
  },
  methods: {
    signOut () {
      this.$router.push('/')
    },
    sizeChange () {
      if (this.flag === true) {
        this.width_size = '200px'
        this.flag = false
        document.getElementById('ico_img').style.left = '-78px'
      } else {
        this.width_size = '40px'
        this.flag = true
        document.getElementById('ico_img').style.left = '1px'
      }
    },
    signOutSystem () {
      this.$router.push('/login')
      this.$message.success('退出系统成功')
    },
    manager () {
      this.$router.push('/home/manager')
    },
    role () {
      this.$router.push('/home/role')
    }
  }
}
</script>

<style  scoped>

.el-aside{
  position:relative;
  height:1000px;
  background-color: rgb(25, 26, 35);
}
.el-header{

}
.header_top{
  float:left;
  width:40px;
  height:40px;
  line-height: 40px;
  font-size: 14px;
  color:#fff;
  background-color: green;
  text-align: center;
  margin-left:-20px;
}
.header_button{
    float:right;
    margin-right:-20px;
    font-size:12px;
}
.el-aside .el-menu{
  border-right:none;
}
.el-aside  .image{
  height:43px;
}
.el-aside #ico_img {
  position:relative;
  top:20px;
  left:-78px;
  width: 20px;
  height:20px;
  border-radius: 50%;
  z-index: 100;
}
.el-aside .ico_font{
  position: relative;
  left:-20px;
  color:#fff;
  font-size:14px;
}
.el-aside .el-menu  i {
  position: absolute;
  left:15px;
  top:50%;
  transform:translate(0,-50%);
}
.el-aside .el-menu  span {
  position: absolute;
  left:46px;
  top:50%;
  transform:translate(0,-50%);
}
.el-header{
  height:40px !important;
  background-color:#fff;
  line-height: 40px;
}
.el-menu{
  background-color: rgb(25, 26, 35) !important;
}
.el-menu--collapse{
  width:36px;
}
</style>
